// 1. 初始化
const userCountWrapper = document.querySelector('.user-count-wrapper .chart');
const userCountChart = echarts.init(userCountWrapper);
// 2. 配置项
const userCountOption = {
    color: [{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            // rgb同时加相同的数字 能使眼色变白(变亮)
            // offset: 0, color: 'rgb(255, 255, 200)' // 0% 处的颜色
            offset: 0, color: '#fff2e8' // 0% 处的颜色
        }, {
            offset: 1, color: '#ad2102' // 100% 处的颜色
        }],
    }],
    textStyle: {
        color: 'red',
    },
    grid: {
        top: 20,
        bottom: 40,
        right: 0,
    },
    xAxis: {
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255, 0, 0, .3)',
            },
        },
        axisTick: {
            show: false,
        },
        type: 'category',
        data: userCount
            .sort((a, b) => b.count - a.count)
            .map(item => item.city),
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255, 0, 0, .3)',
            },
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255, 0, 0, .3)',
            },
        },
    },
    series: [
        {
            data: userCount
                .sort((a, b) => b.count - a.count)
                .map(item => item.count),
            type: 'bar'
        }
    ]
};
// 3. 导入配置项
userCountChart.setOption(userCountOption);
